<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>车辆管理</title>
    <link rel="stylesheet" href="../../lib/layui/css/layui.css">
    <link rel="stylesheet" href="../../css/okadmin.css">

</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>车辆列表</legend>
</fieldset>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-form-item">

                    <div class="layui-inline">
                        <label class="layui-form-label">类型</label>
                        <div class="layui-input-inline">
                            <select name="type" id="type" style="float: left;position: relative;">
                                <option value="0">手动挡</option>
                                <option value="1">自动挡</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">分配情况</label>
                        <div class="layui-input-inline">
                            <select name="isFree" id="isFree" style="float: left;position: relative;">
                                <option value="">全部</option>
                                <option value="1">未被分配</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">所属教练</label>
                        <div class="layui-input-inline">
                            <select name="coach" id="coach" style="float: left;position: relative;" lay-search>
                                <option value="">全部</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline more" style="display: none">
                        <label class="layui-form-label">车辆ID</label>
                        <div class="layui-input-inline">
                            <input type="text" name="vehicleId" id="vehicleId" placeholder="车辆ID" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline more" style="display: none">
                        <label class="layui-form-label">车牌</label>
                        <div class="layui-input-inline">
                            <input type="text" name="licensePlateNumber" id="licensePlateNumber" placeholder="车牌"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline more" style="display: none">
                        <label class="layui-form-label">名称</label>
                        <div class="layui-input-inline">
                            <input type="text" name="vehicleName" id="vehicleName" placeholder="名称" autocomplete="off"
                                   class="layui-input">
                        </div>
                    </div>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-xs" title="显示更多" id="moreBtn"
                            type="0">
                        <i class="layui-icon">&#xe654;</i>
                    </button>
                    <div class="layui-inline">
                        <button class="layui-btn layuiadmin-btn-list" lay-submit lay-filter="LAY-app-contlist-search" id="selectsBtn">
                            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="layui-card-body">
            <table id="vehicleList" lay-filter="vehicleList" class="layui-table"></table>
        </div>
    </div>
</div>

<script src="../../lib/layui/layui.js"></script>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/application.js"></script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="modify">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use(['table', 'laydate', 'layer', 'okLayer'], function () {
        var table = layui.table,
            $ = layui.$,
            form = layui.form,
            layer = layui.layer,
            okLayer = layui.okLayer,
            laydate = layui.laydate;

        myAjax(mainUri + '/coach/selects', {page: -1}, function (datas) {
            var list = datas['data'];
            var option;
            for (var i = 0; i < list.length; i++) {
                {
                    option += "<option value='" + list[i]['coachId'] + "'>" + list[i]['fullname'] + "</option>";
                }
            }
            $("#coach").append(option);
            form.render('select');
        })
        //获取表格数据
        var vehicleTable = table.render({
            elem: '#vehicleList',
            url: mainUri + '/vVehicle/selects', //数据接口
            where:{type:0},
            cols: [[ //表头
                {field: 'vehicleId', title: 'ID'},
                {field: 'licensePlateNumber', title: '车牌'},
                {field: 'vehicleName', title: '名称'},
                {field: 'type', title: '类型', templet: function (d) {
                        if(d.type=="0"){
                            return "手动挡"
                        }else if(d.type=="1"){
                            return "自动挡"
                        }else{
                            return "数据异常"
                        }
                    }},
                {
                    field: 'coach', title: '所属教练', templet: function (d) {
                        if(d.fullname&&d.coachId){
                        return d.fullname+"("+d.coachId+")"
                        }else{
                            return "无教练"
                        }
                    }
                },
                {field: 'price', title: '价格'},
                {field: 'remark', title: '备注'},
                {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 200}
            ]],
            page: {
                layout: ['prev', 'page', 'next', 'skip', 'count'],
                groups: 3,
                limit: 15,
                theme: '#1E9FFF',
            },
        });

        function editVehicle(data) {
            let uri = "vehicleEdit.html?" + dataToString(data)
            okLayer.open("信息修改", uri, "50%", "60%", function (layero) {
                let iframeWin = window[layero.find("iframe")[0]["name"]];
            }, function () {
                vehicleTable.reload();
            })
        }

        //监听行工具事件
        table.on('tool(vehicleList)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                var msg="确定删除该条信息?"
                if(isNoEmpty(data['coachId'])){
                    msg+="</br><span style='color: red'>该车辆已经被分派给"+data['coachId']+"("+data['fullname']+")教练</span>"
                }
                layer.confirm(msg, function (index) {
                    myAjax(mainUri + "/vehicle/delete", {vehicleId: data['vehicleId']}, function (d) {
                        if (d['code'] == '0') {
                            layer.msg(d['msg'], {
                                icon: 1, time: 2000, end: function () {
                                    vehicleTable.reload();
                                    layer.closeAll();
                                }
                            })
                        } else {
                            alert(d['msg'])
                        }
                    })
                })
            } else if (obj.event === 'modify') {
                editVehicle(data)
            }
        });

        /**
         * 搜索按钮
         */
        $("#selectsBtn").on('click', function () {
            var vehicleId = $("#vehicleId").val();//车辆id
            var licensePlateNumber = $("#licensePlateNumber").val();//车牌
            var vehicleName = $("#vehicleName").val();//名称
            var type = $("#type").find("option:checked").val();//类型
            var isFree = $("#isFree").find("option:checked").val();//分配情况
            var coach = $("#coach").find("option:checked").val();//教练
            var data = {
                vehicleId: vehicleId,
                licensePlateNumber: licensePlateNumber,
                vehicleName: vehicleName,
                type: type,
                isFree: isFree,
                coachId: coach,
            }
            vehicleTable.reload({
                where: data,
            });
        })

        /**
         * 修改更多按钮
         */
        function changeMoreBtn() {
            var btn = $("#moreBtn");
            if (btn.attr("type") == '1') {
                btn.html(" <i class=\"layui-icon\">&#xe654;</i>\n")
                btn.attr('type', '0')
                btn.attr('title', '显示更多')
            } else {
                btn.html(" <i class=\"layui-icon\">&#xe67e;</i>\n")
                btn.attr('type', '1')
                btn.attr('title', '隐藏')
                $("#studentId").val("");//id
                $("#fullname").val("");//教练姓名
                $("#phone").val("");//电话号码
            }
        }

        /**
         * 更多按钮
         */
        $("#moreBtn").on('click', function () {
            $(".more").toggle('fast', changeMoreBtn());
        })
    });
</script>
</body>
</html>
`